<template>
  <el-dialog
    :title="name+'的考勤记录'"
    @close="handleDialogClose"
    :close-on-click-modal="false"
    :visible="detailsVisible"
    width="900px"
  >
    <section class="record">
      <section class="record-tips">
        <section class="record-tips-item">
          <span class="dot green"></span>
          <span>正常</span>
        </section>
<!--        <section class="record-tips-item">-->
<!--          <span class="dot origin"></span>-->
<!--          <span>迟到/早退</span>-->
<!--        </section>-->
        <section class="record-tips-item">
          <span class="dot red"></span>
          <span>旷工</span>
        </section>
      </section>
      <br>
      <br>
      <div class="table-container table-box globalDiv">
        <el-table
            :cell-style="styleBack"
            :data="tableData"
            height="400px"
            style="width: 100%">
          <el-table-column
              prop="date"
              label="日期">
          </el-table-column>
          <el-table-column
              prop="dayOfWeek"
              label="星期">
          </el-table-column>
          <el-table-column
              prop="comeWorkClockInTime"
              align="center"
              label="上班打卡">
            <template slot-scope="scope">
              <p v-if="scope.row.state!=1&&scope.row.state!=2" :title="'state:'+scope.row.state">{{scope.row.comeWorkClockInTime|timeFormat}}</p>
              <p v-if="scope.row.state==1" :title="'state:'+scope.row.state">
                <span v-if="scope.row.comeWorkClockInTime != null">
                  {{ scope.row.comeWorkClockInTime|timeFormat }}
                </span>
                <span v-else>休息</span>
              </p>
              <!-- <p v-if="scope.row.state==2" :title="'state:'+scope.row.state"></p> -->
              <p v-if="scope.row.state==2" :title="'state:'+scope.row.state">{{ getDaysBetweenDates(dateChange(), scope.row.date) > -1 ? '-' : '-'}}</p>
            </template>
          </el-table-column>
          <el-table-column
              prop="comeOffWorkClockInTime"
              align="center"
              label="下班打卡">
            <template slot-scope="scope">
              <p v-if="scope.row.state!=1&&scope.row.state!=2" :title="'state:'+scope.row.state">{{scope.row.comeOffWorkClockInTime|timeFormat}}</p>
              <p v-if="scope.row.state==1" :title="'state:'+scope.row.state">
                <span v-if="scope.row.comeOffWorkClockInTime != null">
                  {{ scope.row.comeOffWorkClockInTime|timeFormat }}
                </span>
                <span v-else>休息</span>
              </p>
              <!-- <p v-if="scope.row.state==2" :title="'state:'+scope.row.state"></p> -->
              <p v-if="scope.row.state==2" :title="'state:'+scope.row.state">{{ getDaysBetweenDates(dateChange(), scope.row.date) > -1 ? '-' : '-'}}</p>

            </template>
          </el-table-column>
          <el-table-column
              prop="worktime"
              align="center"
              label="工作时长">
            <template slot-scope="scope">
              {{scope.row.worktime|timeFormat}}
            </template>
          </el-table-column>
<!--          <el-table-column-->
<!--              prop="overtime"-->
<!--              label="加班时长">-->
<!--            <template slot-scope="scope">-->
<!--              {{scope.row.overtime|timeFormat}}-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
      </div>

      <section class="record-main" style="display: none">



<!--        <header>-->
<!--          <section>日期</section>-->
<!--          <section>星期</section>-->
<!--          <section>上班打卡</section>-->
<!--          <section>下班打卡</section>-->
<!--          <section>工作时长</section>-->
<!--          <section>加班时长</section>-->
<!--        </header>-->
<!--        <div class="record-content" v-for="(item, index) in recordList">-->
<!--          <section class="normal">{{ item.key }}</section>-->
<!--          <section class="red">{{ item.key2 }}</section>-->
<!--          <section class="origin">{{ item.key3 }}</section>-->
<!--          <section>{{ item.key4 }}</section>-->
<!--          <section>{{ item.key5 }}</section>-->
<!--          <section>{{ item.key6 }}</section>-->
<!--        </div>-->
      </section>
    </section>
  </el-dialog>
</template>
<script>
export default {
  props:{
    tableRow:{
      type:Object,
      default:()=>{
        return {}
      }
    },
    detailsVisible:{
      type:Boolean,
      default:false
    }
  },
  computed:{

  },
  filters:{
    timeFormat(val){
      if (!val){
        return '-'
      }else if(val.indexOf(".")!=-1){
        return val.split(".")[0]
      }else{
        return val
      }
    }
  },
  data() {
    return {
      name:"",
      recordList: [],
      tableData: []
    };
  },
  watch: {},
  methods: {
    dateChange(){
      let date = new Date();
      this.selectedYear=date.getFullYear()
      this.selectedMonth=date.getMonth()+1
      this.selectedMonth = this.selectedMonth < 10 ? "0" + this.selectedMonth : this.selectedMonth;
      this.selectedDay=date.getDate()
      this.selectedDay = this.selectedDay < 10 ? "0" + this.selectedDay : this.selectedDay;
      return this.selectedYear + '-' + this.selectedMonth + '-' + this.selectedDay
    },
    getDaysBetweenDates(date1, date2) {
      const d1 = new Date(date1);
      const d2 = new Date(date2);
      const time1 = d1.getTime();
      const time2 = d2.getTime();
      const timeDiff = time2 - time1;
      const daysDiff = Math.floor(timeDiff / (24 * 60 * 60 * 1000));
      return daysDiff;
    },
    getNowTime(){
      // timestamp是整数，否则要parseInt转换,不会出现少个0的情况
      const time = new Date()
      const year = time.getFullYear()
      const month = time.getMonth() + 1
      const day = time.getDate()
      const hours = time.getHours()
      const minutes = time.getMinutes()
      const seconds = time.getSeconds()
      return new Date().getTime()
      // return `${year}-${month < 10 ? '0' + month : month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    UnixToDate(string) {
      var f = string.split(' ', 2);
      var d = (f[0] ? f[0] : '').split('-', 3);
      var t = (f[1] ? f[1] : '').split(':', 3);
      return (new Date(
          parseInt(d[0], 10) || null,
          (parseInt(d[1], 10) || 1) - 1,
          parseInt(d[2], 10) || null,
          parseInt(t[0], 10) || null,
          parseInt(t[1], 10) || null,
          parseInt(t[2], 10) || null
      )).getTime() / 1000;
    },
    styleBack({ row, column, rowIndex, columnIndex }) {

      if(columnIndex == 0||columnIndex == 1||columnIndex == 4||columnIndex == 5){
        let dayNum = 0;
        dayNum = this.getDaysBetweenDates(this.dateChange(), row.date);
        let styleStr="";
        if (dayNum > 0) {
          styleStr="backgroundColor: none;color:#ffc300!important;opacity:0.5;"
        }
        // console.log('styleStr',styleStr)
        return styleStr
      }

      // 上班打卡列
      if(columnIndex == 2||columnIndex == 3){
        let backgroundColor=this.getColColor(row.state)
        // console.log('颜色',backgroundColor);
        // console.log('state',row.state);
        // console.log('row',row);
        // console.log('column',column);
        // console.log('rowIndex',rowIndex);
        // console.log('columnIndex',columnIndex);
        // console.log(123, this.getNowTime());
        // console.log(2345, this.UnixToDate(row.date)*1000 - this.getNowTime());

        let dayNum = 0;
        dayNum = this.getDaysBetweenDates(this.dateChange(), row.date);
        let styleStr="backgroundColor: "+backgroundColor+";color:#ffc300!important";
        if ((row.state === 1 || row.state === 2) && row.worktime === null && dayNum > 0) {
          styleStr="backgroundColor: none;color:#ffc300!important;opacity:0.5;"
        }
        // console.log('styleStr',styleStr)
        return styleStr
      }
    },
    stateFormat(stateArr,columnIndex){
      if (stateArr.length==1){
        return this.getColColor(stateArr[0])
      }else if(stateArr.length==2){
        if (columnIndex==2){
          // 上班打卡列
          return this.getColColor(stateArr[0])
        }if (columnIndex==3){
          //下班打卡列
          return this.getColColor(stateArr[1])
        }
      }
      // return val.length
    },
    getColColor(state){
      /// 0：正常
      /// 1：休息日
      /// 2：旷工
      var color='#ffffff'
      // debugger
      if (state===0){
        // 正常
        color="#c2efcc"
      }else if(state===1){
        // 休息日
        color='#ffffff'
      }else if(state===2){
        // 缺卡
        color='#f55151'
      }
      return color
    },
    handleDialogClose(){
      console.log(this.$parent);
      this.$parent.detailsVisible=false
    },
    // open() {
    //   this.dialogVisible = true;
    // },
  },
  mounted(){
    var row=JSON.parse(JSON.stringify(this.tableRow))
    // row.details[0].state=[3,3]
    this.name=row.personName
    this.tableData=row.details
    // for (var i=1;i<=31;i++){
    //   var temp={
    //     key: "2024-03-"+i,
    //     key2: "星期一",
    //     key3: "8:26",
    //     key4: "18:35",
    //     key5: "08:00:00",
    //     key6: "08:00:00",
    //   }
    //   this.recordList.push(temp)
    // }
  }
};
</script>
<style scoped lang="scss">
.green {
  background-color: #b5e5c6;
}
.origin {
  background-color: rgba(255, 195, 0, 1);
  color: rgba(237, 26, 26, 1)
}
.red {
  background-color: rgba(245, 81, 81, 1);
}
.default {
  background-color: #fff;
}


.record {
  &-tips {
    display: inline-flex;
    &-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(0, 0, 0, 1);
      font-size: 16px;
      margin-right: 40px;
      .dot {
        width: 40px;
        height: 12px;
        border-radius: 50px;
        display: inline-block;
        margin-right: 10px;
      }
    }
  }
  &-main {
    margin-top: 16px;
    header {
      font-weight:bold;
      display: flex;
      background: linear-gradient(
        90deg,
        rgba(201, 215, 242, 1) 0.07%,
        rgba(201, 221, 242, 1) 100%
      );
      border-radius: 4px 4px, 0px, 0px;
      section {
        height: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
      }
    }
    .record-content {
      display: flex;
      &:nth-child(odd){
          background-color: rgba(228, 233, 242, 1);
        }
      section {
        position: relative;
        flex: 1;
        height: 43px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.normal{
  &::after{
    position: absolute;
    content:'';
    width: 100%;
    height: 100%;
    background-color: rgba(29, 196, 68, 0.27);
  }
}
.red{
  background-color: rgba(245, 81, 81, 1);
}
.origin{
  color: rgba(237, 26, 26, 1);
  background-color: rgba(255, 195, 0, 1);
}
.gray{
  color: rgba(0, 0, 0, 0.3)  ;
}

::v-deep .el-dialog {
  height: 80%;
  //overflow: auto;
}
</style>
